var notImplemented = function () {
    alert("Not implemented!");
};

function Word(spelling, transcription, translations, createdAt, score) {
    this.spelling = ko.observable(ko.utils.unwrapObservable(spelling));
    this.transcription = ko.observable(ko.utils.unwrapObservable(transcription));
    translations = ko.utils.unwrapObservable(translations);
    this.translations = ko.observableArray(
        typeof translations === "string" ? translations.split("\n") : translations);
    this.createdAt = ko.observable(ko.utils.unwrapObservable(createdAt || new Date()));
    this.score = ko.observable(ko.utils.unwrapObservable(score || 0));
}

var behaviour = {

    afterRender: function () {
        setTimeout(function () { $("a.button").button(); }, 0);
    },

    openEditor: function (event, word) {
        this.editor
            .spelling(word ? word.spelling() : "")
            .transcription(word ? word.transcription() : "")
            .translations(word ? word.translations().join("\n") : "");
        this.editor.word = word;
        $("#editor").dialog("open");
    },

    saveWord: function(event) {
        var editor = this.editor;
        if (editor.word) {
            editor.word
                .spelling(editor.spelling())
                .transcription(editor.transcription())
                .translations(editor.translations().split("\n"));
        } else {
            this.words.push(new Word(
                editor.spelling,
                editor.transcription,
                editor.translations));
        }
        $("#editor").dialog("close");
    },

    addMultipleWords: function () {
        notImplemented();
    },

    deleteWord: function () {
        notImplemented();
    },

    startQuiz: function () {
        notImplemented();
    },

    closeEditor: function() {
        $("#editor").dialog("close");
    },

    openBatchDialog: function() {
        notImplemented();
    },

    synchronize: function() {
        notImplemented();
    }
};

var viewModel = {
    words: [
        {
            spelling: "AAA",
            transcription: "BBB",
            translations: ["CCC", "DDD"],
            createdAt: new Date(100000000000),
            score: 0
        },
        {
            spelling: "BBB",
            transcription: "CCC",
            translations: ["DDD", "EEE"],
            createdAt: new Date(200000000000),
            score: 0
        }
    ],
    editor: {
        spelling: "AAA",
        transcription: "BBB",
        translations: "CCC"
    },
    synchronized: false
};

$(function () {
    $.extend(viewModel, behaviour);
    viewModel = ko.mapping.fromJS(viewModel);
    ko.applyBindings(viewModel);

    $("a.button, button, input[type=button], input[type=submit]").button();

    $("table.sortable").tablesorter({
        headers: {
            0: { sorter: false }
        }
    });

    $("#editor").dialog({
        autoOpen: false,
        title: "Word Editor",
        modal: true,
        resizable: false,
        draggable: false,
        width: 600
    });

    $("input[type=text], textarea").bind({
        "focus": function () {
            $(this)
                .removeClass("ui-state-default")
                .addClass("ui-state-active");
        },
        "blur": function () {
            $(this)
                .removeClass("ui-state-active")
                .addClass("ui-state-default");
        }
    });

    $("body").fadeIn();
});